<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-tabs
        default-active-key="1"
        @change="callback"
      >
        <a-tab-pane
          key="1"
          tab="当面付设置"
        >
          <a-form
            class="permission-form"
            :form="form"
          >
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否开启当面付"
              extra=""
            >
              <a-radio-group v-decorator="['is_scan_code_pay', {rules: [{required: true}], initialValue: 0}]">
                <a-radio :value="0">
                  关闭
                </a-radio>
                <a-radio :value="1">
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="是否开启分销"
              extra=""
            >
              <a-radio-group v-decorator="['is_share', {rules: [{required: true}], initialValue: 0}]">
                <a-radio :value="0">
                  关闭
                </a-radio>
                <a-radio :value="1">
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="佣金类型"
              extra=""
            >
              <a-radio-group
                v-decorator="['price_type', {rules: [{required: true}], initialValue: 0, initialValue: 5, getValueFromEvent: (e) => {
                  this.form_price_type = e.target.value
                  return e.target.value
                }}]">
                <a-radio :value="0">
                  百分比
                </a-radio>
                <a-radio :value="1">
                  固定金额
                </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="一级佣金"
              extra=""
            >
              <a-input-number
                placeholder="一级佣金"
                :min="0.001"
                :step="0.001"
                :precision="3"
                v-decorator="['first', { rules: [{required: true, message: '请输入一级佣金'}],initialValue: 0 }]"
              /> {{ form_price_type == 0 ? '%' : '元' }}
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="二级佣金"
              extra=""
            >
              <a-input-number
                placeholder="二级佣金"
                :min="0.001"
                :step="0.001"
                :precision="3"
                v-decorator="['second', { rules: [{required: true, message: '请输入二级佣金'}],initialValue: 0 }]"
              /> {{ form_price_type == 0 ? '%' : '元' }}
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="三级佣金"
              extra=""
            >
              <a-input-number
                placeholder="三级佣金"
                :min="0.001"
                :step="0.001"
                :precision="3"
                v-decorator="['third', { rules: [{required: true, message: '请输入三级佣金'}],initialValue: 0 }]"
              /> {{ form_price_type == 0 ? '%' : '元' }}
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="短信提醒"
              extra=""
            >
              <a-radio-group v-decorator="['is_sms', {rules: [{required: true}], initialValue: 0}]">
                <a-radio :value="0">
                  关闭
                </a-radio>
                <a-radio :value="1">
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="邮件提醒"
              extra=""
            >
              <a-radio-group v-decorator="['is_mail', {rules: [{required: true}], initialValue: 0}]">
                <a-radio :value="0">
                  关闭
                </a-radio>
                <a-radio :value="1">
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="订单打印"
              extra=""
            >
              <a-radio-group v-decorator="['is_print', {rules: [{required: true}], initialValue: 0}]">
                <a-radio :value="0">
                  关闭
                </a-radio>
                <a-radio :value="1">
                  开启
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="支付方式"
              extra=""
            >
              <a-checkbox :checked="form_pay.wechat == 1" @change="payChange('wechat', $event)">
                微信支付
              </a-checkbox>
              <a-checkbox :checked="form_pay.alipay == 1" @change="payChange('alipay',$event)">
                支付宝支付
              </a-checkbox>
              <a-checkbox :checked="form_pay.balance == 1" @change="payChange('balance', $event)">
                余额支付
              </a-checkbox>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button
                type="primary"
                html-type="submit"
                @click="handleOk"
              >
                提交
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import {
  STable
} from '@/components'
import {
  getSetting,
  setSetting
} from '@/api/plugin/scanCodePay'
export default {
  name: 'ScanCodePaySetting',
  components: {
    STable
  },
  data () {
    return {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      form: this.$form.createForm(this),
      share_pic: '',
      form_pay: {
        alipay: 0,
        balance: 0,
        wechat: 0
      },
      form_price_type: 0
    }
  },
  filters: {
  },
  created () {
    this.loadData()
  },
  methods: {
    callback (key) {
      console.log(key)
    },
    loadData () {
      getSetting({})
        .then(res => {
          console.log('getSetting', res)
          this.setting_data = res.data
          this.form_price_type = res.data.price_type
          res.data.is_scan_code_pay = parseInt(res.data.is_scan_code_pay || 0)
          res.data.is_share = parseInt(res.data.is_share || 0)
          res.data.price_type = parseInt(res.data.price_type || 0)
          res.data.is_sms = parseInt(res.data.is_sms || 0)
          res.data.is_mail = parseInt(res.data.is_mail || 0)
          res.data.is_print = parseInt(res.data.is_print || 0)
          Object.assign(this.form_pay, res.data.payment_type)
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(res.data, ['is_scan_code_pay', 'is_share', 'price_type', 'first', 'second', 'third', 'is_sms', 'is_mail', 'is_print']))
          })
        }).catch(err => {
          this.$message.error(err.message)
        })
    },
    payChange (type, e) {
      if (type === 'alipay') {
        this.form_pay.alipay = e.target.checked ? 1 : 0
      }
      if (type === 'balance') {
        this.form_pay.balance = e.target.checked ? 1 : 0
      }
      if (type === 'wechat') {
        this.form_pay.wechat = e.target.checked ? 1 : 0
      }
    },
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return false
        }
        values.payment_type = this.form_pay
        this.modalLoading = true
        setSetting(values).then(res => {
          console.log(res)
          this.modalLoading = false
          if (res.code === 0) {
            this.$message.success('保存成功！')
            this.loadData()
          }
        }).catch(err => {
          this.$message.error(err.message)
          this.modalLoading = false
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
